<template>
    <div align="center">
        <h2>添加</h2>
        <table>
            <tr>
                <td>卡卷名称</td>
                <td><input type="text" v-model="info.shopName"></td>
            </tr>
            <tr>
                <td>卡卷类型</td>
                <td>
                    <select v-model="info.cardType">
                        <option value="-1">-请选择-</option>
                        <option v-for="item in cardTypeList" :value="item.cardName">{{ item.cardName }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td> 
                    <input type="file" @change="photo">
                    <img :src="info.images" width="120px">
                </td>
            </tr>
           
            <tr>
                <td>适用范围(所属酒店)</td>
                <td>
                    <select v-model="info.hid">
                        <option value="-1">-请选择-</option>
                        <option v-for="item in hotelclass" :value="item.hotelName">{{ item.hotelName }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>适用日期</td>
                <td>
                    <input type="checkbox" v-model="info.allDate" value="周一"> 周一
                    <input type="checkbox" v-model="info.allDate" value="周二"> 周二
                    <input type="checkbox" v-model="info.allDate" value="周三"> 周三
                    <input type="checkbox" v-model="info.allDate" value="周五"> 周五<br>
                    <input type="checkbox" v-model="info.allDate" value="周六"> 周六
                    <input type="checkbox" v-model="info.allDate" value="周日"> 周日
                    <input type="checkbox" v-model="info.allDate" value="全天"> 全天
                    <input type="checkbox" v-model="info.allDate" value="法定节假日"> 法定节假日
                </td>
            </tr>
            <tr>
                <td>有效期</td>
                <td><input type="" v-model="info.cardDo"></td>
            </tr>
            <tr>
                <td>价格(元)</td>
                <td><input type="text" v-model="info.cardAmount"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="添加" @click="addShop"></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

//他叫勾子函数,在页面加载时执行,类似于文档就虚函数的作用
onMounted(() => {
    Bindcard();
    Bindhotel();
})

//添加时 为传递数据 准备的容器
let info: any = reactive({
    shopName: "",
    cardType: "-1",
    images:"",
    hid: "-1",
    allDate: [],
    cardDo: "",
    cardAmount: null,
    state: 1,
    isDeleted: true
})


let cardTypeList = ref([]);
//绑定下拉框
const Bindcard = () => {
    axios({
        url: "/api/Hotel/BindCard",
        method: "get",
    }).then((res) => {
        console.log(res.data);

        cardTypeList.value = res.data;
    })
}

let hotelclass = ref([]);

//绑定下拉框
const Bindhotel = () => {
    axios({
        url: "/api/Hotel/BindHotel",
        method: "get",
    }).then((res) => {
        console.log(res.data);

        hotelclass.value = res.data;
    })
}

//添加
const addShop = () => {

    //基本验证
    if (info.shopName == "") {
        alert("卡卷名称不能为空");
        return;
    }


    if (info.images == "") {
        alert("请上传图片");
        return;
    }

    if (info.cardType == "-1") {
        alert("请选择卡卷类型");
        return;
    }

    if (info.hid == "-1") {
        alert("请选择所属酒店");
        return;
    }

    if (info.allDate.length == 0) {
        alert("请选择适用日期");
        return;
    }

    if (info.cardDo == "") {
        alert("有效期不能为空");
        return;
    }

    if (info.cardAmount == null) {
        alert("价格不能为空");
        return;
    }





    //axios 添加的 网络请求
    info.allDate = info.allDate.join(",");
    axios({
        url: "/api/Hotel/AddShop",
        method: "post",
        data: {
            shopName: info.shopName,
            cardType: info.cardType,
            images: info.images,
            hid: info.hid,
            allDate: info.allDate,
            cardDo: info.cardDo,
            cardAmount: info.cardAmount,
            state: info.state,
            isDeleted: info.isDeleted 
        }
    }).then((res) => {
        console.log(res.data);
        if (res.data > 0) {
            alert("添加成功");
            router.push("/ShopShowsView");
        } else if (res.data == -1) {
            alert("卡卷名称已存在");
            return;
        } else {
            alert("添加失败");
            return;
        }
    })
}


//图片
const photo = (e: any) => {
    console.log(e);
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj);

    axios({
        url: '/api/Hotel/Photo',
        method: 'post',
        data: f
    })
        .then((res) => {
            if (res.data == "文件格式不正确") {
                alert("文件格式不正确");
                return;
            } else if (res.data == "文件超出2M") {
                alert("文件超出2M");
                return;
            }
            info.imgages = res.data;
        })
        .catch((err) => {
            console.log(err);
            return;
        })
}




</script>

<style scoped></style>